import { throttle } from 'lodash'
import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore"
const chartEditStore = useChartEditStore()
const dragKey = 'dragKey'
// ! 拖拽开始（鼠标按下并移动时触发）
export const dragStartHandle = (e: DragEvent, item?: any) => {
  e.dataTransfer.setData(dragKey, JSON.stringify(item))
}

// ! 拖拽到编辑区域内（鼠标松开时触发）
export const dragHandle = (e: DragEvent) => {
  e.preventDefault()
  const data = e.dataTransfer.getData(dragKey)
  const newComponent = JSON.parse(data)
  newComponent.attr.x = e.offsetX - newComponent.attr.w / 2
  newComponent.attr.y = e.offsetY - newComponent.attr.h / 2
  chartEditStore.addComponentList(newComponent)
}
// ! 拖拽进入编辑区域内（鼠标在区域内会一直触发）
export const dragoverHandle = (e: DragEvent) => {
  e.preventDefault()
  e.stopPropagation()
}
// ! 拖拽结束
export const dragendHandle = (e: MouseEvent) => {

}

export const useMouseHandle = () => {
  // Click是阿金， 鼠标按下松开出发
  const mouseClickHandle = () => { }
  // 鼠标按下(包含移动)
  const mouseDownHandle = (e: MouseEvent, item: any) => {
    e.preventDefault()
    e.stopPropagation()
    const scale = chartEditStore.editCanvas.scale
    const canvasWidth = chartEditStore.editCanvasConfig.width
    const canvasHeight = chartEditStore.editCanvasConfig.height
    // 鼠标按下
    const startX = e.screenX
    const startY = e.screenY
    const initialLeft = item.attr.x // 新增：记录元素初始位置
    const initialTop = item.attr.y   // 新增：记录元素初始位置
    const mousemove = (moveEvent: MouseEvent) => {
      // 当前偏移量，处理 scale 比例问题
      let offsetX = (moveEvent.screenX - startX) / scale
      let offsetY = (moveEvent.screenY - startY) / scale
      const { x, y, w, h } = item.attr
      let currX = Math.round(initialLeft + offsetX)
      let currY = Math.round(initialTop + offsetY)
      // 基于左上角位置检测
      currX = currX < -w + w ? -w + w : currX
      currY = currY < -h + h ? -h + h : currY

      // 基于右下角位置检测
      currX = currX > canvasWidth - w ? canvasWidth - w : currX
      currY = currY > canvasHeight - h ? canvasHeight - h : currY
      console.log(currX, currY)
      item.attr.x = currX
      item.attr.y = currY
      //  console.log('move', offsetX, offsetY)
    }
    const mouseup = () => {
      // 鼠标松开
      document.removeEventListener('mousemove', mousemove)
      document.removeEventListener('mouseup', mouseup)
    }
    document.addEventListener('mousemove', mousemove)
    document.addEventListener('mouseup', mouseup)

  }
  return {
    mouseClickHandle,
    mouseDownHandle
  }
}
// * 移动锚点
export const useMousePointHandle = (e: MouseEvent, point: string, attr: any) => {
  e.stopPropagation()
  e.preventDefault()

  // 设置拖拽状态
  // chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
  const scale = chartEditStore.editCanvas.scale
  console.log(scale)
  const itemAttrX = attr.x
  const itemAttrY = attr.y
  const itemAttrW = attr.w
  const itemAttrH = attr.h

  // 记录点击初始位置
  const startX = e.screenX
  const startY = e.screenY

  // 记录初始位置
  // chartEditStore.setMousePosition(startX, startY)

  const mousemove = throttle((moveEvent: MouseEvent) => {
    // chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)

    let currX = Math.round((moveEvent.screenX - startX) / scale)
    let currY = Math.round((moveEvent.screenY - startY) / scale)
    console.log(currX, currY)
    const isTop = /t/.test(point)
    const isBottom = /b/.test(point)
    const isLeft = /l/.test(point)
    const isRight = /r/.test(point)

    const newHeight = itemAttrH + (isTop ? -currY : isBottom ? currY : 0)
    const newWidth = itemAttrW + (isLeft ? -currX : isRight ? currX : 0)

    attr.h = newHeight > 0 ? newHeight : 0
    attr.w = newWidth > 0 ? newWidth : 0
    attr.x = itemAttrX + (isLeft ? currX : 0)
    attr.y = itemAttrY + (isTop ? currY : 0)
  }, 50)

  const mouseup = () => {
    // chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
    // chartEditStore.setMousePosition(0, 0, 0, 0)
    document.removeEventListener('mousemove', mousemove)
    document.removeEventListener('mouseup', mouseup)
  }

  document.addEventListener('mousemove', mousemove)
  document.addEventListener('mouseup', mouseup)
}
